<template>
	<div
		class="mod-config"
		v-loading="loading"
		element-loading-text="拼命加载中"
		element-loading-spinner="el-icon-loading"
		element-loading-background="rgba(0, 0, 0, 0.8)"
		style="height: calc(100% - 3rem)"
	>
		<iframe
			width="99%"
			height="100%"
			scrolling="no"
			id="pdfIframe"
			:src="`http://10.1.108.219:9081/whManager${src}?token=${token}`"
		></iframe>
	</div>
</template>

<script lang="ts">
import { ref, watch, onMounted, onActivated } from 'vue';

export default {
	props: {
		pdfSrc: {
			type: String,
		},
		token: {
			type: String,
		},
	},
	setup(props) {
		const src = ref('');
		const loading = ref(false);

		const getPdfCode = () => {
			loading.value = true;
			// let pdfUrl = encodeURIComponent(props.pdfSrc);
			src.value = props.pdfSrc;
			let token = props.token;
			console.log('src', src.value);

			loading.value = false;
		};

		watch(
			() => props.pdfSrc,
			(newVal) => {
				if (newVal) {
					getPdfCode();
				}
			},
			{ deep: true, immediate: true },
		);

		onMounted(() => {
			getPdfCode();
		});

		onActivated(() => {
			getPdfCode();
		});

		const prohibit = () => {
			document.oncontextmenu = function (ev) {
				return false;
			};
			document.onkeydown = function (e) {
				if (
					e.ctrlKey &&
					(e.keyCode === 65 ||
						e.keyCode === 67 ||
						e.keyCode === 73 ||
						e.keyCode === 74 ||
						e.keyCode === 80 ||
						e.keyCode === 83 ||
						e.keyCode === 85 ||
						e.keyCode === 86 ||
						e.keyCode === 117)
				) {
					return false;
				}
				if (e.keyCode === 18 || e.keyCode === 123) {
					return false;
				}
			};
		};

		return {
			src,
			loading,
			getPdfCode,
			prohibit,
		};
	},
};
</script>

<style scoped lang="scss">
* {
	padding: 0;
	margin: 0;
}
.mod-config {
	#pdfIframe {
		border: 1px solid #0000003b;
	}
}

@media print {
	* {
		display: none;
	}
}
</style>
